<template>
	<view v-if="data.showselected">
		<view class="tabbar">
			<view class="navigator">
				<view class="navigator-item" v-for="(item,index) in data.list" :key="item.pagePath"
					@click="switchTab(item)">
					<img :src=" item.iconPath " class="icon" v-if="selectedIndex !== index">
					<img :src="item.selectedIconPath" class="icon" v-else>
					<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>


</template>

<script setup>
	import {
		ref,
		defineProps
	} from "vue";
	import jlbIcon from "@/static/img/tabbar/home_default.png";
	import jlbSelectIcon from "@/static/img/tabbar/home_selected.png";
	import fxIcon from "@/static/img/tabbar/discover_default.png";
	import fxSelectIcon from "@/static/img/tabbar/discover_selected.png";
	import ddIcon from "@/static/img/tabbar/order_default.png";
	import ddSelectIcon from "@/static/img/tabbar/order_selected.png";
	import myIcon from "@/static/img/tabbar/my_default.png";
	import mySelectIcon from "@/static/img/tabbar/my_selected.png";
	const props = defineProps(['selectedIndex'])
	const data = ref({
		showselected: true, // 是否在页面使用tarBar
		list: [{
				"pagePath": "/pages/tabbar/home/home",
				"iconPath": jlbIcon,
				"selectedIconPath": jlbSelectIcon,
				"text": "俱乐部"
			},
			{
				"pagePath": "/pages/tabbar/discover/discover",
				"iconPath": fxIcon,
				"selectedIconPath": fxSelectIcon,
				"text": "发现"
			},
			{
				"pagePath": "/pages/tabbar/order/order",
				"iconPath": ddIcon,
				"selectedIconPath": ddSelectIcon,
				"text": "订单"
			},
			{
				"pagePath": "/pages/tabbar/my/my",
				"iconPath": myIcon,
				"selectedIconPath": mySelectIcon,
				"text": "我的"
			}

		]
	})

	function switchTab(item){
		uni.switchTab({
			url:item.pagePath
		})
		
	};

</script>

<style lang="scss">
	.tabbar{
		background-color: #fff;
		position: fixed;
		bottom:0; /* 兼容 iOS < 11.2 */
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
		left: 0;
		right: 0;
		z-index: 99;
	}
	.navigator {
		
		width: 100vw;
		height: 112rpx;
		padding: 0 56rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.navigator-item {
			width: 112rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.icon {
				width: 50rpx;
				height: 50rpx;
			}

			.item-text {
				font-size: 20rpx;
				color: #747474;
			}

			.text-active {
				color: #5E77F8;
			}
		}
	}
</style>